<template>
  <div class="detail">
    <NavHeader :title="poi_name"/>
    <div class="tab-bar">
      <a
        class="tab-item " @click="urlChange('/detailbook')" >{{detail_tabs[0].name}}
      </a>
      <a
        class="tab-item active"   @click="urlChange('/detailevaluation')" >{{detail_tabs[1].name}}
      </a>
      <a
        class="tab-item "  @click="urlChange('/detailaddress')" >{{detail_tabs[2].name}}
      </a>
    </div>
    <div class="comment-inner">
      <div class="comment-score">
        <div class="mail-score-content">
          <div class="mail-score">{{item.comment_score ? item.comment_score.toFixed(1) : ''}}</div>
          <div class="mail-text">商家评价</div>
        </div>
        <div class="other-score-content">
          <div class="taste-score">
            <div class="taste-text">口味</div>
            <div class="taste-star-wrap"><StarScore :score="item.food_score" /></div>
            <div class="taste-score-text">{{item.food_score ? item.food_score.toFixed(1) : ''}}</div>
          </div>
          <div class="package-score">
            <div class="package-text">包装</div>
            <div class="package-star-wrap"><StarScore :score="item.pack_score" /></div>
            <div class="package-score-text">{{item.pack_score}}</div>
          </div>
        </div>
        <div class="send-score-content">
          <div class="send-score">{{item.delivery_score}}</div>
          <div class="send-text">商家评价</div>
        </div>
      </div>
      <ContentList></ContentList>
    </div>
  </div>
</template>

<script>

  import { mapState } from 'vuex'
  import  StarScore from "@/components/common/StarScore"
  import  NavHeader from "@/components/common/NavHeader"
  import  ContentList from "@/components/detail/ContentList"
export default {
  data(){
    return {
    }
  },
  computed: {
    ...mapState(['poi_name','detail_tabs'])
  },
  components: {
    NavHeader,
    ContentList,
    StarScore
  },
  mounted() {
  },
  methods: {
    urlChange(url){
      this.$router.push({ path: url, query: { id: this.$route.query.id}})
    }
  },
  async asyncData (context) {
    //请求后台数据 这里注意了参数必须使用config配置项 如果直接拼接字符串会有bug
    const { data } = await context.app.$axios.get("/app2/json/comments.json")
    return {item:data.data}
  },
}
</script>

<style lang="stylus" scoped>
  .tab-bar {
    font-size: (16px);
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    margin-top: (1.28rem);
    .tab-item {
      flex: 1;
      height: (0.9rem);
      line-height:(0.9rem);
      position: relative;
      color: #666;
      text-align: center;
      text-decoration: none;
      &.active {
        &:after {
          content: '';
          display: block;
          height: 0.08rem;
          width: 1.2rem;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          -webkit-transform: translateX(-50%);
          background-color: #ffd161;
        }
      }
    }
  }
  .comment-score {
    display: flex;
    padding-left: (0.5rem);
    padding-right: (0.5rem);
    padding-top: (0.3rem);
    padding-bottom: (0.3rem);
    border-top: (0.2rem) solid #f6f6f6;
    border-bottom: 1px solid #d5d5d5;
    .mail-score-content {
      display: flex;
      flex-direction: column;
    }
    .other-score-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-around;
    }
    .taste-star-wrap, .package-star-wrap {
      margin-left: (0.3rem);
      margin-right: (0.3rem);
    }
    .package-score, .taste-score {
      display: flex;
      justify-content: center;
    }
    .mail-score {
      font-size: (32px);
      color: #ffb000;
      margin-bottom: (0.1rem);
    }
    .mail-text {
      font-size: (12px);
      color: #656565;
    }
    .taste-text,.package-text {
      font-size: (12px);
      color: #554343;
    }
    .taste-score-text, .package-score-text {
      font-size: (15px);
      color: #ffb000;
    }
    .send-score-content {
      display: flex;
      flex-direction: column;
      margin-top: (0.06rem);
    }
    .send-score {
      font-size: (24px);
      color: #999;
      margin-bottom: (0.1rem);
      text-align: center;
    }
    .send-text {
      font-size: (12px);
      color: #999;
    }
  }
</style>
